@import url("rem.less");
.mask{
    position:fixed;
    left: 0;
    bottom: 0;
    width: 100%;
    height:100%;display: none;
    background: rgba(0,0,0,0.7);
    z-index:99;
    touch-action: none;
    .col{
        position: absolute;
        right: 0;top: 0;
        height: 100%;width: 70%;
        border-left: 1px solid #999;
        background: #fff;overflow: auto;
        display: none;
        .col_nav{
            position: fixed;
            bottom: 0;right: 0;
            width: 70%;.dis;
            p{flex: 1;.lh(120);
                text-align: center;
                background: #D70057;
                color: #fff;border: 1px solid #ccc;
                border-collapse: collapse;
            }
            p:first-child{
                background: rgba(255,255,255,0.7);
                color: #292929;
            }
        }
        .col_opts{
            .padding(30,30,30,30);
            ul{
                .dis;flex-wrap: wrap;justify-content:flex-start;
                li{
                    width:28%;.lh(90);text-align: center;
                    border: 1px solid #999;color: #292929;
                    border-radius: 10px;.mb(30);.mr(30);.font-dpr(10px);
                }
            }
            .scope{
                background: #f5f5f5;.padding(15,30,15,30);
                .dis;.ipts{
                    .w(260);.h(90);
                    outline: none;border: none;
                    background: #fff;
                }
                span{
                    color: #999;
                }
            }
        }
        .col_opts>h5{
            .dis;justify-content: space-between;.lh(80);
            .font-dpr(15px);span{.font-dpr(20px);}
        }
        .have{
            .mb(120); .padding(30,30,30,30);.dis;
            dl{
                .dis;justify-content: flex-start;
                dt{.w(70);.h(70);.mr(15);
                    img{
                        width: 100%;
                    }
                }
                dd{.font-dpr(13px);}
            }
        }
    }
    .share{
        position: absolute;
        .b(130);left:0;width: 100%;
        display: none;
        .sh_top{
            .swiper-slide{
                .dis;flex-wrap: wrap;
                dl{
                   width: 30%;
                   text-align: center;.mb(30);
                   dt{margin: auto; .w(180);.h(180);img{width: 100%;}}
                   dd{.font-dpr(13px);color: #fff;}
                }
            }
        }
        .sh_bottom{
            text-align: center;
        }
    }
}